<template>
	<div :id="model.id" class="img-text-list warp" :class="'terminal'+terminal">
		<div class="title" v-if="model.data.title">
			<h2 class="h2" :style="{
				textAlign:model.data.textAlign,
				fontSize:`${model.data.fontSize}px`,
				fontWeight:model.data.fontWeight,
				color:model.data.fontColor
			}">
				{{model.data.title}}
			</h2>
		</div>
		<ul class="clearfix" :class="`img-text-list-${model.data.listStyle}`">
			<li v-for="(item,index) in model.data.imgTextData" :key="index">
				<a class="item a-link" @click="jumpLink(model.data.linkObj)">
					<div class="item-img-box" v-show="item.isShow">
						<div class="img-box">
							<el-image :src="item.imgUrl" fit="contain" v-show="item.imgUrl" :alt="item.title"></el-image>
						</div>
					</div>
					<div class="text-box" v-if="item.title">
						<h4 class="h4" v-if="item.title" :style="{
							textAlign:item.titleOptions.textAlign,
							fontSize:`${item.titleOptions.fontSize}px`,
							fontWeight:item.titleOptions.fontWeight,
							color:item.titleOptions.fontColor
						}">{{item.title}}</h4>
						<p class="p" v-if="item.describe" :style="{
							textAlign:item.describeOptions.textAlign,
							fontSize:`${item.describeOptions.fontSize}px`,
							fontWeight:item.describeOptions.fontWeight,
							color:item.describeOptions.fontColor
						}">{{item.describe}}</p>
					</div>
				</a>
			</li>
		</ul>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive } from 'vue';
	export default {
		name: 'image-text-list-basics',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
			});
			
			return {
				...toRefs(state),
			};
		}
	}
</script>

<style lang="scss" scoped>
	.img-text-list {
		padding: 10px;

		.title {
			position: relative;
			padding-bottom: 10px;
			.h2 {
				font-size: 18px;
				color: #333;
				line-height: 1em;
				font-weight: bold;
			}
		}

		ul {
			margin: 0 0 0 -10px;
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			
			li {
				flex: 0 0 50%;
				padding: 0 0 0 10px;

				.item {
					.item-img-box {
						height: auto;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.img-box {
							background-color: transparent;
							position: relative;
						}
					}

					.text-box {
						text-align: center;

						.h4 {
							line-height: 25px;
							overflow: hidden;
							color: #333333;
						}

						.p {
							color: #666666;
						}
					}
				}
			}
		}

		.img-text-list-1-1 {
			li {
				flex: 0 0 100%;
			}
		}
		
		.img-text-list-1-2 {
			li {
				flex: 0 0 50%;
			}
		}
		
		.img-text-list-1-3 {
			li {
				flex: 0 0 33.33%;
			}
		}

		.img-text-list-2-1-2 {
			li:nth-child(3n + 1) {
				flex: 0 0 100%;
			}
			li {
				flex: 0 0 50%;
			}
		}

		.img-text-list-2-2-3 {
			li:nth-child(5n + 1) {
				flex: 0 0 50%;
			}
			li:nth-child(5n + 2) {
				flex: 0 0 50%;
			}
			li {
				flex: 0 0 33.33%;
			}
		}
	}

	@media screen and (max-width: 768px) {
		.hom-pro-list ul li {
			flex: 0 0 50%;
		}
	}

	.terminal1,
	.terminal2,
	.terminal3 {
		&.hom-pro-list ul li {
			flex: 0 0 50%;
		}
	}
</style>
